<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>私人订制</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>

    </style>
</head>

<body>


    <!--正文-->
    <div class="custom-made bc-gray">
        <div class="bd">
            <div class="bd1">
                <ul>
                    <li v-for='item in datas'>
            
                        <div style="position:relative;">
                            <img :src="item.imgurl" alt="img/今日产品 图片@2x.png" class="product">
                            <p class="main-2-2">{{item.produce_title}}</p>
                        </div>

                        <span class="button" @click='click_link()'>
                            我要定制
                        </span>
                    </li>
                </ul>
            </div>

        </div>

    </div>


    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:.84rem;"></div>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>

    <script>
        $(function () {
            
            $('.hd span').click(function () {
                $(this).toggleClass('active').siblings().removeClass('active');
                $('.mask').fadeToggle();
                var idx = $(this).index();
                $('.td>div').eq(idx).toggleClass('active').siblings().removeClass('active');

                $(this).toggleClass('arrow-top')

            })
            $('.td1 ul li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                $('.mask').hide();
                $('.td>div').removeClass('active');
            })


        })
    </script>

    <script>
        $(function () {
            function getUrlParam(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); 
                var r = window.location.search.substr(1).match(reg); 
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            }
            var storeId = getUrlParam('storeId');

            new Vue({
                el: 'body',
                data: {
                    datas: []
                },
                ready: function () {
                    

                    console.log(storeId)
                    this.$http.get(base_url + 'ZITAOHUI/order/orderProduce', {
                        params: {
                            storeId: storeId,
                            uid: 1
                        }
                    }).then(
                        function (response) {
                            console.log(response)
                            let all_data = response.data.extend.result.produce;
                            console.log(all_data)
                            this.$set('datas', all_data)
                        }
                    )
                },
                methods:{
           
                    click_link:function(){
                        window.location.href = '../page/Fill-in-custom-information.html?s_id='+storeId
                    }
                }
            })
        })
    </script>
</body>

</html>